<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">可提现金额</text>
			<input class="input" type="text" v-model="base"  disabled="" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">金额</text>
			<input class="input" type="text" v-model="amount" placeholder="请输入提现金额" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">收款人姓名</text>
			<input class="input" type="text" v-model="name" placeholder="请输入提现姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">收款账号</text>
			<input class="input" type="text" v-model="account_no" placeholder="请输入提现账号" placeholder-class="placeholder" />
		</view>

		<view class="row default-row">
			<text class="tit">收款方式</text>
			<radio-group name="radio" @change="typeChange" class="radio-group">
				<label>
					<radio value="0" :checked="payType === 0" />
					<text>支付宝</text>
				</label>
				<label style="margin-left: 20rpx;">
					<radio value="1" :checked="payType === 1" />
					<text>微信</text>
				</label>
			</radio-group>
		</view>
		<button class="add-btn" @click="confirm">提交</button>
		
		<view class="d-flex direction-column">
			
			<view class="withdraw-item d-flex align-items-center justify-between" v-for="(item, index) in withList" :key="index" >
				<view class="d-flex direction-column" >
					<text class='info'>{{item.remark}}</text>
					<text class="time">{{item.add_time}}</text>
				</view>
				<view class="d-flex direction-column"><text class="price">{{item.money}}</text></view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import {
	mapState
} from 'vuex';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			base:0,
			name:'',
			amount:0,
			account_no:'',
			payType:0,
			items:[
				{
					value: 'alipay',
					name: '支付宝',
					checked: 'true'
				},
				{
					value: 'wxpay',
					name: '微信',
				},
			],
			headerPosition: 'fixed',
			headerTop: '0px',
			loadingType: 'more', //加载更多状态
			page:1,
			withList:[],
		};
	},
	computed: {
			...mapState('user',['token']),
		},
	onShow() {
		if(!this.token){
			return uni.navigateTo({
				url:'/pages/public/login'
			})
		}
		this.loadAmount();
	},
	onLoad() {
		// #ifdef H5
		this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
		// #endif
		this.loadData('refresh');
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		if (e.scrollTop >= 0) {
			this.headerPosition = 'fixed';
		} else {
			this.headerPosition = 'absolute';
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.page=1;
		this.loadData('refresh');
	},
	//加载更多
	onReachBottom() {
		if(this.loadingType =='more'){
			this.page=this.page+1;
			this.loadData();
		}
		
	},
	methods: {
		loadAmount(){
			var param = {
				token:this.token,
			}
			this.$ajax.get('member/getamount',param).then(data=>{
				console.log(data);
				if(0==data.error){
					this.base = data.base;
				}
			})
		},
		// 切换类型
		typeChange({ detail }) {
			this.payType = detail.value;
		},
		async loadData(type='add',loading){	
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return;
				}
				this.loadingType = 'loading';
			} else {
				this.loadingType = 'more';
			}
			let param={
				token:this.token,
				page:this.page,
			}
			this.$ajax.get('member/withdraw',param).then(data=>{
				if(0==data.error){
					let num = data.data.length;
					if (type === 'refresh') {
						this.withList = data.data;
					}else{
						this.withList = this.withList.concat(data.data);
					}
					this.loadingType = num < 10 ? 'nomore' : 'more';
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				}
			})
		},
		//提交
		confirm(){
			if(!this.name){
				this.$api.msg('必须输入收款人姓名');
				return false;
			}
			if(this.amount<=0){
				this.$api.msg('提现金额必须大于0');
				return false;
			}
			if(this.amount > this.base){
				this.$api.msg('你的提现金额只有'.this.base);
				return false;
			}
			if(!this.account_no){
				this.$api.msg('必须输入转账账号');
				return false;
			}
			let params={
				token:this.token,
				name: this.name,
				money:this.amount,
				account_no:this.account_no,
				category:this.items[this.payType].value
			}
			this.$ajax.get('member/applywithdraw',params).then(data=>{
				if(0==data.error){
					uni.showToast({
						title:"申请成功",
						icon:"success",
						duration:1000,
					});
					setTimeout(function(){
						this.loadData('refresh');
					},1000)
					
				}else{
					this.$api.msg(data.msg);
				}
			})
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-top: 16upx;
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30upx;
	height: 100upx;
	background: #fff;
	.radio-group text {
		font-size: 30rpx;
	}

	.tit {
		flex-shrink: 0;
		width: 180upx;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.icon-shouhuodizhi {
		font-size: 36upx;
		color: $font-color-light;
	}
}
.default-row {
	margin-top: 16upx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16upx) scale(0.9);
	}
}
.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690upx;
	height: 80upx;
	margin: 50upx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
.withdraw-item {
	background-color: #ffffff;
	padding: 20rpx;
	.info {
		font-size: $font-lg;
	}
	.price {
		font-size: $font-sm;
		color: $uni-color-primary;
		line-height: 1;
		&:before {
			content: '￥';
			font-size: 26rpx;
		}
	}
	.time {
		color: #999999;
		font-size: $font-sm;
		margin-top: 10rpx;
	}
	&:not(:last-child) {
		border-bottom: 1px solid #eee;
	}
}
</style>
